<template>
	<view v-if="hasLogin">		
		<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input v-model="nickname" type="text" maxlength="32" placeholder="请填写昵称">
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal" @click="resetNickname">确定</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal3'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input v-model="telephone" type="text" maxlength="11" placeholder="请填写手机号">
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal" @click="resetTelephone">确定</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal4'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input v-model="location" type="text" maxlength="100" placeholder="请填写地址">
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal" @click="resetLocation">确定</view>
				</view>
			</view>
		</view>
		
		<view class="cu-list menu sm-border">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-emojiflashfill text-pink"></text>
					<text class="text-black">头像</text>
				</view>
				<view class="action">
					<view class="cu-avatar-group">
						<view class="cu-avatar radius sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-myfill text-green"></text>
					<text class="text-black">用户名</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{userInfo.username}}</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border">	
			<view class="cu-item arrow" @tap="showModal" data-target="DialogModal2">
				<view class="content">
					<text class="cuIcon-card text-orange"></text>
					<text class="text-black">昵称</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{userInfo.nickname}}</text>
				</view>
			</view>			
			<view class="cu-item arrow" @tap="showModal" data-target="DialogModal3">
				<view class="content">
					<text class="cuIcon-dianhua text-green"></text>
					<text class="text-black">手机号</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{userInfo.telephone}}</text>
				</view>
			</view>
			
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-crownfill text-blue"></text>
					<text class="text-black">性别</text>
				</view>
				<form>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker action">
						<text class="text-grey text-sm">{{index>-1?picker[index]:userInfo.sex%2==0?'女':'男'}}</text>
					</view>
				</picker></form>
				<!--<view class="action">
					<text class="text-grey text-sm">{{userInfo.sex%2==0?'女':'男'}}</text>
				</view>-->			
			</view>
			
			<view class="cu-item arrow" @tap="showModal" data-target="DialogModal4">
				<view class="content">
					<text class="cuIcon-locationfill text-green"></text>
					<text class="text-black">地址</text>
				</view>
				<navigator url="../address/index" class="action">
					<text class="text-grey text-sm"></text>
				</navigator>
			</view>			
		</view>
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow">
				<navigator class="content" hover-class="none" url="chpassword" open-type="redirect">
					<text class="cuIcon-settingsfill text-black"></text>
					<text class="text-grey">修改密码</text>
				</navigator>
			</view>
			<view class="cu-item arrow">
				<view class="content" @click="outLogin">
					<text class="cuIcon-exit text-black"></text>
					<text class="text-grey">退出登录</text>
				</view>
			</view>
		</view>
	</view>
	<view v-else>
		<view class="main flex justify-center">
		
			<view class="margin-left-lg margin-right-lg margin-top-lg">
				<!--<view class="header">
					<image src="../../static/ucenter/logo.png"></image>
				</view>-->
				<view class="head"></view>
				<form>
					<!--<view class="list-call">
						<image class="img" src="../../static/ucenter/tel.png"></image>
						<input class="biaoti" v-model="phoneno" type="number" maxlength="11" placeholder="手机号" />
					</view>-->
					<view class="cu-form-group">
						<view class="flex title justify-center">
							<text class="text-orange cuIcon-people"></text>
						</view>
						<input v-model="username" type="text" maxlength="32" placeholder="用户名"></input>
					</view>
					<view class="cu-form-group">
						<view class="flex title justify-center">
							<text class="text-orange cuIcon-lock"></text>
						</view>
						<input v-model="password" type="text" maxlength="32"  placeholder="密码" :password="!showPassword"></input>
						<text :class="'cuIcon-'+[showPassword?'attention':'attentionforbid']" class="text-orange" @tap="display"></text>
					</view>
					
					<!--<view class="list-call">
						<image class="img" src="../../static/ucenter/3.png"></image>
						<input class="biaoti" v-model="code" type="number" maxlength="4" placeholder="验证码" />
						<view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view>
					</view>-->
					
				</form>
				<view class="padding flex flex-direction" @tap="bindLogin">
				
					<button class="cu-btn round lg bg-green text-center">登录/注册</button>
					
				</view>

				
				<view class="flex justify-center align-center">
					<text @tap="xieyitong" :class="'cuIcon-'+[xieyi==true?'roundcheck':'round']" class="text-orange"></text>
					<text @tap="xieyitong"> 同意</text>
					<navigator url="blog?id=1" open-type="navigate">《软件用户协议》</navigator>
				</view>
			</view>
		</view>	
	</view>
	
</template>

<script>
	var tha,js;
	export default {
		onLoad(){
			tha = this;
			
		},
		onUnload(){
			clearInterval(js)
			this.second = 0;
		},
		data() {
			return {
				index: -1,
				picker: ['男', '女'],
				modalName:null,
				username:'',
				telephone:'',
				password:'',
				//code:'',
				nickname:'',
				xieyi:true,
				showPassword:false,
				second:0
			};
		},
		computed:{
			hasLogin(){
				return this.$store.getters.doneHasLogin;
			},
			userInfo(){
				return this.$store.getters.doneUserInfo;
			},
			yanzhengma(){
				if(this.second==0){
					return '获取验证码';
				}else{
					if(this.second<10){
						return '重新获取0'+this.second;
					}else{
						return '重新获取'+this.second;
					}
				}
			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
				this.$H.put('/user/user/reset-sex',{
					id:this.$store.state.userInfo.id,
					index:this.index
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:result.data.message,
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						this.$store.commit('alterUserInfo',result.data.data);
						uni.showModal({
							title:'成功',
							content:'修改昵称成功',
							showCancel:false,
						})
					}
				})
				
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			display() {
			    this.showPassword = !this.showPassword
			},
			xieyitong(){
				this.xieyi = !this.xieyi;
			},
			getcode(){
				if(this.second>0){
					return;
				}
				this.second = 60;
				uni.request({
				    url: 'http://***/getcode.html', //仅为示例，并非真实接口地址。
				    data: {phoneno:this.phoneno,code_type:'reg'},
					method: 'POST',
					dataType:'json',
				    success: (res) => {
						if(res.data.code!=200){
							uni.showToast({title:res.data.msg,icon:'none'});
						}else{
							uni.showToast({title:res.data.msg});
							js = setInterval(function(){
								tha.second--;
								if(tha.second==0){
									clearInterval(js)
								}
							},1000)
						}
				    }
				});
			},
		    bindLogin() {
				if (this.xieyi == false) {
				    uni.showToast({
				        icon: 'none',
				        title: '请先阅读《软件用户协议》'
				    });
				    return;
				}
				/*if (this.phoneno.length !=11) {
				    uni.showToast({
				        icon: 'none',
				        title: '手机号不正确'
				    });
				    return;
				}*/
				if (this.username.length == 0) {
				    uni.showToast({
				        icon: 'none',
				        title: '用户名不能为空'
				    });
				    return;
				}
		        if (this.password.length < 6) {
		            uni.showToast({
		                icon: 'none',
		                title: '密码不正确'
		            });
		            return;
		        }
				/*if (this.code.length != 4) {
				    uni.showToast({
				        icon: 'none',
				        title: '验证码不正确'
				    });
				    return;
				}*/
				let user = {username:this.username,password:this.password}
				this.$store.dispatch('login',user);				
				/*uni.request({
				    url: 'http://localhost:8001/user/login',
				    method: 'POST',
					header: {
						"content-type": "application/json"
					},
					data: {
						phoneno:this.phoneno,
						password:this.password,
						//code:this.code,
					},
					
				    success: (res) => {
						if(res.data.code!=200){
							uni.showToast({title:res.data.msg,icon:'none'});
						}else{
							uni.showToast({title:res.data.msg});
							setTimeout(function(){
								uni.navigateBack();
							},1500) 
						}
				    }
				});*/
				
		    },
			outLogin(){
				this.$store.dispatch('outLogin');
			},
			resetNickname(){
				this.$H.put('/user/user/reset-nickname',{
					id:this.$store.state.userInfo.id,
					nickname:this.nickname
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:result.data.message,
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						this.$store.commit('alterUserInfo',result.data.data);
						uni.showModal({
							title:'成功',
							content:'修改昵称成功',
							showCancel:false,
						})
					}
				})
			},
			resetTelephone(){
				this.$H.put('/user/user/reset-telephone',{
					id:this.$store.state.userInfo.id,
					telephone:this.telephone
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:result.data.message,
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						this.$store.commit('alterUserInfo',result.data.data);
						uni.showModal({
							title:'成功',
							content:'修改手机号码成功',
							showCancel:false,
						})
					}
				})
			},
			resetLocation(){
				this.$H.put('/user/user/reset-location',{
					id:this.$store.state.userInfo.id,
					location:this.location
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:result.data.message,
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						this.$store.commit('alterUserInfo',result.data.data);
						uni.showModal({
							title:'成功',
							content:'修改地址成功',
							showCancel:false,
						})
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.main{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	    background-color: white;
	}
	.head{
		height: 20%;
	}
</style>
